
import { View } from "@tarojs/components";
import { inject, Ref, unref } from "vue";

const { border = true, disabled = undefined } = defineProps<{
  label?: string;
  placeholder?: string;
  vertical?: boolean;

  labelWidth?: string;
  type?: "text" | "number" | "idcard" | "safe-password";

  border?: boolean;
  disabled?: boolean;

  prop?: string
}>();

const formProps = inject<{
  disabled: Ref<boolean>;
}>("ByForm");





<template>
  <view
    class="flex"
    :class="[
      vertical ? 'flex-col' : '',
      border && 'border-0 border-b border-solid border-[#ddd]',
    ]"
  >
    <label
      class="flex-none py-3"
      :class="[!vertical && 'mr-3']"
      :style="{ width: labelWidth }"
    >
      {{ label }}
    </label>

    <view
      class="flex-auto flex flex-col justify-center"
      :class="[vertical && 'pb-3']"
    >
      <slot>
        <input
          class="flex-1 h-[90px]"
          v-model="input"
          :placeholder="placeholder"
          :type="type"
          :disabled="disabled ?? unref(formProps?.disabled)"
        />
      </slot>
    </view>
  </view>
</template>
